<template>
  <div class="User">
      <h4 class="title">个人中心</h4>
      <div class="user-info wid">
        <ul class="user-list">
          <div class="img-box">
              <img src="../assets/images/userimg.jpg" alt="">
          </div>
          <div class="user-text">
            <p>你好就好</p>
            <span>上次登录时间：3天前</span>
          </div>
          <div class="qiandao" @click="iconclick('已签到')">
            签到领积分
          </div>
        </ul>
        <ul class="num-list">
          <li> <p>3</p> <span>银行卡</span></li>
          <li> <p>152000</p> <span>积分</span></li>
          <li> <p>15</p> <span>优惠</span></li>
          <li> <p>456</p> <span>余额</span></li>
          <li> <p>1535</p> <span>结息</span></li>
        </ul>
      </div>
      <div class="uuser-icon">
        <ul class="list-box wid">
          <li v-for="(item,index) in UserIcon" :key="index" @click="iconclick(item.title)">
            <img :src="item.imgUrl" alt="">
            <p>{{ item.title }}</p>
          </li>
        </ul>
      </div>
      <div class="img-box wid userbanner">
        <img src="../assets/images/user-banner.jpg" alt="" srcset="">
      </div>
      <div class="user-hot">
          <ul class="list-box wid" >
            <li v-for="(item,index) in UserHot" :key="index" @click="iconclick(item.title)"> 
              <div class="img-box">
                <img :src="item.imgUrl" alt="" srcset="">
              </div>
            </li>
          </ul>
      </div>

      <router-link to="login" class="loginOut" tag="button">退出登录</router-link>

  </div>
</template>

<script>
import { Toast } from 'vant'

export default {
  data(){
    return {
      UserIcon:'',
      UserHot:''
    }
  },
  created(){
    this.getData()
  },
  mounted(){
  },
  methods: {
    getData(){
      this.$axios({
      url:'api/mydata/home.json',
      method:'get'
    }).then( res => {
      let mydata = res.data.mydata
      this.UserIcon = mydata.UserIcon
      this.UserHot = mydata.UserHot
    })
    },
    iconclick(text){
      Toast(text)
    }
  },
  components: {
  }
}
</script>